<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>积分商城</title>
	<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="js/userJScript.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
	<link rel="stylesheet" href="./css/userStyle.css"/>
	<link rel="stylesheet" href="https://at.alicdn.com/t/font_2150071_oqmbug6i2f.css"/>
  </head>
  <style>
	 body{
		 width:100%;
		 min-width: 700px;
		 height:90%
		 background:black;
	 }
	 .searchBar{
		 width:99%;
		 margin: 0 auto;
		 padding: 0;
		/* border: 2px solid #000000; */
	 }
	 .demoTable{
		 /* border: 1px solid #0000FF; */
		 height:80%;
		 width: 100%;
	 }
	 .container{
/* 	   width: 450px;
	   height: 450px; */
	   margin: 10px;
	   padding: 20px;
	   border-radius: 8px;
	   box-shadow: 0 3px 18px rgba(28, 19, 19, 0.5);
	   font-size: 16px;
	 }
	 .layui-form-item{
		 margin: 15px;
	 }
  </style>
  <body>
	  <!--运出申请弹出层开始 -->
	  <div style="display:none;" id="transApply">
		<div class="container">
			<form class="layui-form" action="" method="post" id="transForm" lay-filter="adOrUpForm">
				<div class="layui-form-item" style="position: relative;left:-31px;margin-bottom: 30px;">
					<label class="layui-form-label" style="width: 150px;">选择垃圾类型：</label>
				  <div class="layui-input-inline" style="position: relative; ">
				    <select name="type">
				      <option value="" selected="">选择垃圾类型</option>
				      <option value="1" >厨余垃圾</option>
				      <option value="2">有害垃圾</option>
				      <option value="3">可回收垃圾</option>
				      <option value="4">不可回收垃圾</option>
				    </select>
				  </div>
				</div>
				<div class="layui-form-item" style="position: relative;margin-bottom: 30px;">
				  <div class="layui-inline" style="position: relative;left: -30px;" >
				    <label class="layui-form-label" style="width: 150px;">在库垃圾条目：</label>
				    <div class="layui-input-inline" >
				      <iframe></iframe>
				    </div>
				  </div>
				</div>
				<div class="layui-form-item" style="position: relative;margin-bottom: 30px;">
					<div class="layui-inline" style="position: relative;left: -30px;" >
					  <label class="layui-form-label" style="width: 50px;">重量：</label>
					  <div class="layui-input-inline" >
					    <input style="width: 250px;" type="text" name="weight" lay-verify="number|required" autocomplete="off" class="layui-input" placeholder="请输入重量(以千克为单位)">
					  </div>
					</div>
				</div>
				<div class="layui-form-item" style="position: relative;margin-bottom: 30px;">
				    <label class="layui-form-label" style="width: 50px;position: relative;left: -30px;">详情：</label>
				  <div class="layui-inline"  style="width: 50px;position: relative;left: -30px;">
				    <textarea  style="width: 250px;" placeholder="垃圾来源及描述" class="layui-textarea" name="address" lay-verify="required"></textarea>
				  </div>
				</div>
				<div class="layui-form-item" style="position: relative;left:109px;">
				  <div class="layui-input-inline">
				    <button class="layui-btn  layui-icon layui-icon-username" lay-submit lay-filter="addOrUpGarb">提交</button>
				  </div>
				</div>
			</form>
		</div>
	</div>
	  <!--添加或修改的弹出层结束 -->
	  <!-- 搜索开始-->
	  <div class="searchBar">
		<form class="layui-form" action="">
			  <div class="layui-form-item">
		          <div class="layui-input-inline">
		            <select name="type">
		              <option value="" selected="">操作</option>
		              <option value="1" >收入</option>
		              <option value="2">支出</option>
		            </select>
		          </div>
				   <div class="layui-input-inline">
				        <button type="submit" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
				        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				   </div>
				</div>  
		</form>
	  </div>
	  <!--搜索结束 -->
	  <!-- 数据表格开始-->
	<div class="demoTable">
		  <table class="layui-hide" id="user" lay-filter="user"></table> 
	</div>
	<div id="detailTab" style="display: none">
		<table class="layui-hide" id="detail" lay-filter="detail"></table>
	</div>
	<!--数据表格结束  -->
   </body>
<!-- script开始 -->
	<!-- 行工具栏 -->
	<!--<script type="text/html" id="barDemo">
		<div id="a">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</div>
	</script>-->
	<!-- 头部工具栏 -->
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<a class="layui-btn layui-btn-sm" lay-event="add">积分明细</a>
<!-- 			<a class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</a> -->
		</div>
	</script>
	<!-- 头部工具栏结束 -->
	<!-- layui开始 -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
	layui.use(['table','layer','form','laydate'], function(){
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate=layui.laydate;
			var search;
			
	laydate.render({
			  elem: '#entryTime'
			});		
  //方法级渲染
  var tableIns=table.render({
    elem: '#user'
   ,url:'/transport/list'
   ,method:'post'
   ,contentType: 'application/json'
   ,where:search
   ,height:'full-100'
	,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,cols: [[
      {field:'id', title: 'ID',width:70,sort: true, fixed: true}
      , {field: 'type', title: '收支操作', width: 120,event:'viewDetail', style:'cursor: pointer;background-color: #eee;',
			  templet: function (d) {
				  switch (d.type) {
					  case 1:
						  return '收入';
					  case 2:
						  return "支出";
				  }
			  }
		}
		,{field:'outTime', title: '时间',width:150,sort:true}

      ,{field:'dest', title: '余额',width:'10%',align:'center'}
	  ,{fixed: 'right', title:'操作', width:100,align:'center',
			  templet:function (d) {
	  			if(d.status == 1){
	  				return '<button class="layui-btn layui-btn-xs" lay-event="package">打包运输</button>'
				}else{
	  				return '<button class="layui-btn layui-btn-xs layui-btn-disabled" disabled="true" lay-event="package">打包运输</button>'
				}
			  }
    }
    ]]
	,page: true
	  , parseData: function(res) { //res 即为原始返回的数据
		  return {
			  "code": res.code, //解析接口状态
			  "msg": res.msg, //解析提示文本
			  "count": res.data.total, //解析数据长度
			  "data": res.data.records //解析数据列表
		  };
	  }

	  , response: {
		  statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
	  }
	  ,request: {
    	pageName: "displayStart",
		  limitName: "displayLength"
	  }
	,done:function(res,curr,count){
		console.log(res);
	}
  });
  /* 详情表格渲染*/
	table.render({
		elem:'#detail'
		,url:''
		,cols: [[
			{field:'id', title: 'ID', fixed: true,width:80,}
			,{field:'type', title: '垃圾类型',width:150,
				templet:function(d){
					switch(d.type){
						case 1: return "厨余垃圾";
						case 2: return "有害垃圾";
						case 3:return "可回收垃圾";
						case 4: return "不可回收垃圾";
					}}
			}
			,{field:'weight', title: '重量/吨',width:80,}
			,{field:'origin', title: '来源',width:'25%',}
			,{field:'createTime',width:170, title: '入库时间'}]]
		,response:{
			statusCode: 200
		}
		, parseData: function(res) { //res 即为原始返回的数据
			return {
				"code": res.code, //解析接口状态
				"msg": res.msg, //解析提示文本
				"count": res.data.total, //解析数据长度
				"data": res.data.records //解析数据列表
			};
		}
	});
	
	var url;//添加或修改的url;
/* 	var mainIndex;//关闭的弹出层索引 */
  //打开申请页面
  function openTransApply(){
  	 garbDireAppIndex=layer.open({
  	    type: 2, 
  	    title:"积分明细",
  	    content: 'garbageSelect.html',/* '传入任意的文本或html' *///这里content是一个普通的String
		area:['90%','90%'],
		anim:5,
		resize:false,
		success:function(index){
			url="";
		},
		/* cancel: function(index, layero){ 
		  if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
		    layer.close(index)
		  }
		  return false; 
		} */
		}
  	  );
  }
/*搜索表单提交 */
  form.on('submit(search)', function(data){
		table.reload('user',{
			where: data.field,
			page:{
				curr :1,
			},
		})
	  return false;
        });


 //头工具栏事件
  table.on('toolbar(user)', function(obj){
	var checkStatus=table.checkStatus(obj.config.id);
	var data=checkStatus.data;
    switch(obj.event){
      case 'add':
		openTransApply(); 
		break;
      /* //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break; */
    };
  })

//监听行工具事件
  table.on('tool(user)', function(obj){
	var data = obj.data; //获得当前行数据
	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    if(layEvent === 'package'){
		layer.confirm("您确定打包运输吗？",function(){
				  $.ajax({
					  url: '/transport/packaging/'+ obj.data.id
					  ,type:'GET'
					  , success:function (data) {
						  layer.closeAll('loading');
						  if(data.code==200){
							  layer.msg('打包成功！', {icon: 1,time:2000,shade:0.2});
							  location.reload(true);
						  }else{
							  layer.msg('打包失败！', {icon: 2,time:3000,shade:0.2});
						  }
					  }
				  })
		})
    }else if(layEvent === 'viewDetail'){
		table.reload('detail',{
			elem:'#detail'
			,url:'/garbage/getByTransportId/'+obj.data.id
		});
		layer.open({
			title:'运输列表详情',
			type:1,
			skin:'layui-layer-rim',
			area:['80%','80%'],
			content:$('#detailTab'),
		});
	}
  })

});
</script>
</html>